---
target: Umo Editor
keywords: Umo Editor,Tiptap,富文本编辑器,文档编辑器,文档编辑,协同办公,开源编辑器,国产编辑器
description: Umo Editor 是一个基于 Vue3 和 Tiptap 的本土化开源文档编辑器，专为国人用户设计。它提供了强大的文档编辑能力和 AI 创作功能，支持分页模式、Markdown 语法、富文本编辑、多种格式的节点插入、页面样式设置、文档导出与打印等功能。此外，Umo Editor 还支持自定义扩展、多语言设置和暗色主题。
---

import { Tabs } from 'nextra/components'

# 方法配置

用于配置 Umo Editor 的方法，包括文档保存方法、文件上传方法、文件删除方法、AI 文档助手返回数据的方法等。

## 默认方法

```js
{
  async onSave(content, page, document) {
    throw new Error('Key "onSave": Please set the save method')
  },
  async onFileUpload(file) {
    if (!file) throw new Error('File not found')
    throw new Error('Key "onFileUpload": Please set the upload method')
  },
  onFileDelete(id, url) {
    console.error('The file has been deleted. Please configure the onFileDelete to completely delete the file from the server.')
  },
}
```

## 配置项说明

### onSave

**说明**：配置文档保存方法，在用户保存文档时，调用此方法，将文档保存到服务器。

**类型**：`AsyncFunction`、 `Promise`。

**参数**：

- `content`：文档内容。
- `page`：页面信息。
- `document`：文档信息。

**返回值**：保存成功则返回 `true`，否则返回 `false`，否则返回 `false` 或者抛出错误。


**示例**：

以下代码以[Axios](https://axios-http.com/)为例，演示如何配置 onSave 方法，将文档保存到服务器：

<Tabs items={['全局配置', 'SFC 配置']}>
<Tabs.Tab>
```js
import axios from 'axios'
import { useUmoEditor } from '@umoteam/editor'

const options = {
  async onSave(content, page, document) => {
    const res = await axios.post('/api/save', {
      content,
      page,
      document,
    },{
      headers: {
        'Content-Type': 'application/json',
      }
    });

    // 保存成功则返回 true，否则返回 false，否则返回 false 或者抛出错误
    return true; 
  },
};

app.use(useUmoEditor, options)
```
</Tabs.Tab>
<Tabs.Tab>
```vue
<template>
  <umo-editor 
    @save="onSave" 
  />
</template>
 
<script setup>
import { UmoEditor } from '@umoteam/editor'
import axios from 'axios'

const onSave = async (content, page, document) => {
  const res = await axios.post('/api/save', {
    content,
    page,
    document,
  },{
    headers: {
      'Content-Type': 'application/json',
    }
  });

  // 保存成功则返回 true，否则返回 false 或者抛出错误
  return true; 
}
</script>
```
</Tabs.Tab>
</Tabs>

### onFileUpload

**说明**：配置文件上传方法，用户插入文件时，会触发该方法，将文件上传到服务器。

**类型**：`AsyncFunction`、 `Promise`。

**参数**：

- `file`：File 对象。

**返回值**：

- `id`：上传成功后返回的文件 id。
- `url`：上传成功后返回的文件 url。

**示例**：

以下代码以[Axios](https://axios-http.com/)为例，演示如何配置 onFileUpload 方法，将文件上传到服务器：

<Tabs items={['全局配置', 'SFC 配置']}>
<Tabs.Tab>
```js
import axios from 'axios'
import { useUmoEditor } from '@umoteam/editor'

const options = {
  async onFileUpload(file) => {
    let formData = new FormData();
    // 添加文件到 formData 对象中
    formData.append('file', file);
    const res = await axios.post('/api/file-upload', formData,{
      headers: {
        'Content-Type': 'multipart/form-data',
      }
    });

    // 保存成功则返回 {id, url}，否则返回 false 或者抛出错误
    return {
      id: res.data.id,
      url: res.data.url,
    }; 
  },
};

app.use(useUmoEditor, options)
```
</Tabs.Tab>
<Tabs.Tab>
```vue
<template>
  <umo-editor 
    @file-upload="onFileUpload" 
  />
</template>
 
<script setup>
import { UmoEditor } from '@umoteam/editor'
import axios from 'axios'

const onFileUpload = async (file) => {
  let formData = new FormData();
  // 添加文件到 formData 对象中
  formData.append('file', file);
  const res = await axios.post('/api/file-upload', formData,{
    headers: {
      'Content-Type': 'multipart/form-data',
    }
  });

  // 保存成功则返回 {id, url}，否则返回 false 或者抛出错误
  return {
    id: res.data.id,
    url: res.data.url,
  }; 
}
</script>
```
</Tabs.Tab>
</Tabs>

### onFileDelete

**说明**：配置文件删除方法，用户删除文件时，会触发该方法，将文件从服务器上删除。

**类型**：`Function`。

**参数**：

- `id`：文件 id。
- `url`：文件 url。


**示例**：

以下代码以[Axios](https://axios-http.com/)为例，演示如何配置 onFileDelete 方法，将文件从服务器上删除：

<Tabs items={['全局配置', 'SFC 配置']}>
<Tabs.Tab>
```js
import axios from 'axios'
import { useUmoEditor } from '@umoteam/editor'

const options = {
  onFileDelete(id, url) => {
    axios.delete(`/api/file/${id}`);
  },
};

app.use(useUmoEditor, options)
```
</Tabs.Tab>
<Tabs.Tab>
```vue
<template>
  <umo-editor 
    @file-delete="onFileDelete" 
  />
</template>
 
<script setup>
import { UmoEditor } from '@umoteam/editor'
import axios from 'axios'

const onFileDelete = (id, url) => {
  axios.delete(`/api/file/${id}`);
}
</script>
```
</Tabs.Tab>
</Tabs>
